<template>
  <div class="box">
    <p class="title">修改图片</p>
    <el-form :model="list" status-icon ref="form" label-width="110px" :rules="rules">
      <el-form-item label="图片标题" prop="title">
        <el-input v-model="list.title"></el-input>
      </el-form-item>
      <el-form-item label="连接地址" prop="link">
        <el-input v-model="list.link"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model.number="list.sort"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model.number="list.status" placeholder="请选择">
          <el-option label="禁用" :value="0"></el-option>
          <el-option label="启用" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model.number="list.type" placeholder="请选择">
          <el-option label="banner" :value="1"></el-option>
          <el-option label="广告" :value="2"></el-option>
          <el-option label="分享海报" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图片地址" prop="thumb">
        <el-input v-model="list.thumb" style="display:none"></el-input>
        <div class="img-box" :style="'background-image:url(' + list.thumb + ')'" v-show="list.thumb"></div>
        <el-upload ref="upload" action="https://api.lktehui.com/admin/upload/upload" name="image" :limit="1"  list-type="fileList" :on-success="uploadImgSuccess">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item class="all-handle-btn-box">
        <el-button type="primary" @click="handleCertain(list)">确定</el-button>
        <router-link class="back-btn" to="/image/list"><el-button>返回</el-button></router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list:{},
      rules: {
        title: {required: true, message: '图片标题不能为空', trigger: 'change'},
        sort: {required: true, message: '排序不能为空', trigger: 'change'},
        link: {required: true, message: '连接地址不能为空', trigger: 'change'},
        status: {required: true, message: '状态不能为空', trigger: 'change'},
        type: {required: true, message: '图片类型不能为空', trigger: 'change'},
        thumb: {required: true, message: '图片地址不能为空', trigger: 'change'},
      }
    }
  },
  created() {
    let data = window.sessionStorage.imageData;
    this.list = data ? JSON.parse(data) : {};
  },
  methods: {
    handleCertain(list) {
      const _this = this;
      this.$refs.form.validate(bool => {
        if (bool) {
          this.$confirm("您确定要修改么?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.$ajax({
              url: "banner/modify",
              data: {
                app: list
              },
              success(res) {
                if (res.data.code === 1) {
                  _this.$message({
                    type: "success",
                    message: res.data.msg,
                    onClose() {
                      _this.$router.push('/image/list');
                    }
                  });
                } else {
                  _this.$message({
                    type: "warning",
                    message: res.data.msg
                  });
                }
              }
            });
          }).catch(() => {});
        }
      });
    },
    uploadImgSuccess(response, file, fileList) {
      if (response.code === 1) {
        this.list.thumb = response.content;
      } else {
        this.$message({
          type: "warning",
          message: response.msg
        });
      }
    }
  }
};
</script>

<style scoped>
.el-form {
  width: 50%;
  margin: 0 auto;
}
.title {
  padding: 20px 0;
  font-size: 20px;
  text-align: center;
}
.img-box {
  width: 250px;
  height: 100px;
  background-size: cover;
  background-position: center;
  border: 1px solid #f1f1f1;
}
.back-btn {
  margin-left: 10px;
}
</style>
